<template>
  <div class="story-outline">
    <div class="outline-header">
      <div class="outline-title">
        <h2>故事大纲</h2>
        <el-select v-model="outlineType" placeholder="选择大纲类型" class="outline-type-select">
          <el-option label="三幕式" value="three" />
          <el-option label="五幕式" value="five" />
          <el-option label="自定义" value="custom" />
        </el-select>
      </div>
      <div class="outline-actions">
        <el-button type="primary" @click="generateOutline">AI 生成大纲</el-button>
        <el-button @click="saveOutline">保存大纲</el-button>
      </div>
    </div>

    <!-- 大纲编辑器 -->
    <div class="outline-editor">
      <div class="outline-timeline">
        <div v-for="(act, index) in outlineActs" :key="index" class="act-container">
          <div class="act-header">
            <h3>{{ act.title }}</h3>
            <div class="act-actions">
              <el-button-group>
                <el-button size="small" @click="addScene(index)">添加场景</el-button>
                <el-button size="small" @click="deleteAct(index)">删除</el-button>
              </el-button-group>
            </div>
          </div>
          <div class="act-content">
            <div v-for="(scene, sceneIndex) in act.scenes" :key="sceneIndex" class="scene-item">
              <div class="scene-header">
                <span class="scene-number">场景 {{ sceneIndex + 1 }}</span>
                <el-input v-model="scene.title" placeholder="场景标题" class="scene-title-input" />
              </div>
              <div class="scene-content">
                <el-input
                  v-model="scene.description"
                  type="textarea"
                  :rows="3"
                  placeholder="场景描述"
                />
                <div class="scene-meta">
                  <el-select v-model="scene.emotion" placeholder="情感基调" size="small">
                    <el-option label="欢乐" value="happy" />
                    <el-option label="悲伤" value="sad" />
                    <el-option label="紧张" value="tense" />
                    <el-option label="平静" value="calm" />
                  </el-select>
                  <el-select v-model="scene.conflict" placeholder="冲突类型" size="small">
                    <el-option label="外部冲突" value="external" />
                    <el-option label="内部冲突" value="internal" />
                    <el-option label="人际冲突" value="interpersonal" />
                  </el-select>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 情绪曲线图 -->
    <div class="emotion-curve">
      <h3>情绪曲线</h3>
      <div class="curve-container" ref="curveContainer">
        <canvas ref="emotionCanvas"></canvas>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'

const outlineType = ref('three')
const outlineActs = ref([
  {
    title: '第一幕：开端',
    scenes: [
      {
        title: '开场场景',
        description: '介绍主要人物和背景...',
        emotion: 'calm',
        conflict: 'external'
      }
    ]
  },
  {
    title: '第二幕：发展',
    scenes: [
      {
        title: '冲突出现',
        description: '主要矛盾开始显现...',
        emotion: 'tense',
        conflict: 'internal'
      }
    ]
  },
  {
    title: '第三幕：高潮',
    scenes: [
      {
        title: '危机时刻',
        description: '矛盾达到顶点...',
        emotion: 'tense',
        conflict: 'external'
      }
    ]
  }
])

const curveContainer = ref(null)
const emotionCanvas = ref(null)
let canvasCtx = null

const generateOutline = () => {
  ElMessage.info('AI 正在生成大纲...')
  // TODO: 调用 AI API 生成大纲
}

const saveOutline = () => {
  ElMessage.success('大纲保存成功')
  // TODO: 保存大纲到后端
}

const addScene = (actIndex) => {
  outlineActs.value[actIndex].scenes.push({
    title: '',
    description: '',
    emotion: '',
    conflict: ''
  })
}

const deleteAct = (actIndex) => {
  ElMessageBox.confirm('确定要删除这一幕吗？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    outlineActs.value.splice(actIndex, 1)
  })
}

// 监听大纲类型变化
watch(outlineType, (newType) => {
  if (newType === 'three') {
    outlineActs.value = [
      { title: '第一幕：开端', scenes: [] },
      { title: '第二幕：发展', scenes: [] },
      { title: '第三幕：高潮', scenes: [] }
    ]
  } else if (newType === 'five') {
    outlineActs.value = [
      { title: '第一幕：开端', scenes: [] },
      { title: '第二幕：上升', scenes: [] },
      { title: '第三幕：高潮', scenes: [] },
      { title: '第四幕：下降', scenes: [] },
      { title: '第五幕：结局', scenes: [] }
    ]
  }
})

// 情绪曲线相关方法
const initEmotionCurve = () => {
  const canvas = emotionCanvas.value
  const container = curveContainer.value
  
  canvas.width = container.clientWidth
  canvas.height = container.clientHeight
  
  canvasCtx = canvas.getContext('2d')
  drawEmotionCurve()
}

const drawEmotionCurve = () => {
  if (!canvasCtx) return
  
  const canvas = emotionCanvas.value
  const width = canvas.width
  const height = canvas.height
  
  // 清空画布
  canvasCtx.clearRect(0, 0, width, height)
  
  // 绘制坐标轴
  canvasCtx.beginPath()
  canvasCtx.moveTo(50, 50)
  canvasCtx.lineTo(50, height - 50)
  canvasCtx.lineTo(width - 50, height - 50)
  canvasCtx.strokeStyle = '#dcdfe6'
  canvasCtx.stroke()
  
  // 绘制情绪曲线
  const points = outlineActs.value.flatMap(act => 
    act.scenes.map(scene => {
      const emotionValue = {
        'happy': 0.8,
        'sad': 0.2,
        'tense': 0.6,
        'calm': 0.4
      }[scene.emotion] || 0.5
      return emotionValue
    })
  )
  
  if (points.length > 0) {
    canvasCtx.beginPath()
    canvasCtx.moveTo(50, height - 50 - points[0] * (height - 100))
    
    points.forEach((point, index) => {
      const x = 50 + (index / (points.length - 1)) * (width - 100)
      const y = height - 50 - point * (height - 100)
      canvasCtx.lineTo(x, y)
    })
    
    canvasCtx.strokeStyle = '#409EFF'
    canvasCtx.lineWidth = 2
    canvasCtx.stroke()
  }
}

// 监听大纲变化，更新情绪曲线
watch(outlineActs, () => {
  nextTick(() => {
    drawEmotionCurve()
  })
}, { deep: true })

// 监听窗口大小变化，重绘情绪曲线
const handleResize = () => {
  initEmotionCurve()
}

onMounted(() => {
  initEmotionCurve()
  window.addEventListener('resize', handleResize)
})
</script>

<style scoped>
.story-outline {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.outline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
}

.outline-title {
  display: flex;
  align-items: center;
  gap: 16px;
}

.outline-title h2 {
  margin: 0;
}

.outline-type-select {
  width: 120px;
}

.outline-editor {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  overflow-y: auto;
}

.outline-timeline {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.act-container {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
}

.act-header {
  padding: 16px;
  background: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.act-header h3 {
  margin: 0;
  color: #303133;
}

.act-content {
  padding: 16px;
}

.scene-item {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
}

.scene-item:last-child {
  margin-bottom: 0;
}

.scene-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.scene-number {
  color: #909399;
  font-size: 14px;
}

.scene-title-input {
  width: 300px;
}

.scene-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.scene-meta {
  display: flex;
  gap: 12px;
}

.emotion-curve {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
}

.emotion-curve h3 {
  margin: 0 0 16px 0;
}

.curve-container {
  position: relative;
  height: 300px;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
}

.curve-container canvas {
  width: 100%;
  height: 100%;
}
</style> 